import React, {Component} from 'react';
import {dark, light, baseURL} from '../../config';
import {
  Appearance,
  StyleSheet,
  StatusBar,
  ScrollView,
  Text,
  View,
} from 'react-native';
import {connect} from 'react-redux';
import {outlineGlyphMap} from '@ant-design/icons-react-native/lib/outline';
import {Icon, Grid} from '@ant-design/react-native';
import {pxToDp} from '../../utils/stylesKits';
// import PropTypes from 'prop-types';

/**
 * APP Test 页面
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */
const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Test',
    };
  }

  componentDidMount() {}

  componentDidUpdate(prevProps, prevState) {}

  componentWillUnmount() {}

  render() {
    const outlineData = Object.keys(outlineGlyphMap).map(item => ({
      icon: <Icon name={item} />,
      text: item,
    }));
    return (
      <ScrollView style={styles.container}>
        <StatusBar
          backgroundColor="transparent"
          barStyle={colorScheme.barStyle}
          translucent={true}
        />
        {outlineData.map((item, index) => (
          <View key={index}>
            <Text>{item.icon}</Text>
            <Text>{item.text}</Text>
          </View>
        ))}
      </ScrollView>
    );
  }
}

const mapStateToProps = state => ({});
const mapDispatchToProps = {};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    paddingTop: pxToDp(45),
    paddingLeft: '40%',
  },
});
Test.propTypes = {
  // value: PropTypes.string.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(Test);
